{% extends 'layout/main.html' %}
{% from 'macros/_macros.html' import form_field %}

{% block content_header %}
<div class="row page-titles">
  <div class="col-md-5 col-8 align-self-center">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">首页</a></li>
      <li class="breadcrumb-item active">修改文章: {{ form.title.data }}</li>
    </ol>
  </div>
</div>
{% endblock %}

{% block content %}



<form class="form-material" method="post" action="">
  <div class="row" style="flex-direction: row-reverse;">


    <div class="col-sm" style="flex:0 0 300px;">
      <div class="card el-element-overlay">
        <div class="card-body">

          <div class="el-card-item" style="padding-bottom: 0px;">
            <div class="el-card-avatar el-overlay-1">
              <img id="image_preview" src="{{ form.thumb.data }}">
            </div>
          </div>

          <div class="btn btn-lg m-b-20 btn-danger btn-block waves-effect waves-light btn-file">
            <i class="fa fa-paperclip"></i> 修改{{ form.thumb.label.text }}
            <input id="upload" name="upload" type="file">
          </div>

          {{ form_field(form.thumb, class_='form-control')}}

        </div>
      </div>
    </div>

    <div class="col-sm">
      <div class="card">
        <!-- /.box-header -->
        <div class="card-body">
          {{ form.csrf_token }}
          {{ form_field(form.cid, class_='form-control')}}
          {{ form_field(form.title, class_='form-control')}}
          {{ form_field(form.desc, class_='form-control', rows="5")}}
          {{ form_field(form.content, class_='form-control')}}
          {{ form.submit(class_='btn btn-primary') }}
        </div>
      </div>
    </div>

  </div>
</form>

{{ ckeditor.load() }}
{{ ckeditor.config(name='content', custom_config="allowedContent: true") }}

{% endblock %}


{% block scripts %}
{{ super() }}
<script type="text/javascript">
  $(function () {
    $('#upload').bind('change', function () {
      let formData = new FormData()
      formData.append('csrf_token', '{{ csrf_token() }}')
      formData.append('upload', $(this)[0].files[0])
      $.post({
        url: "{{ url_for('.upload_image') }}",
        data: formData,
        contentType: false,
        processData: false,
        success: function (result) {
          if (result.uploaded) {
            $('#image_preview').attr('src', result.url)
            $('#thumb').attr("value", result.url)
          }
        }
      })
    })
  })
</script>
{% endblock scripts %}